<template>
  <div id="del-treecase">
    <el-tree 
        :props="props" 
        :data="data" 
        node-key="id"
        ref="tree"
        :default-expanded-keys="zhanData"
        @node-expand="nodeExpand"
        @node-collapse="nodeCollapse"
        show-checkbox></el-tree>
    <br/>
    <el-button @click="delNodes" type="primary">确定</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "itemList",
        key:"id"
      },
      data: [],
      //哪个节点展开
      zhanData:[]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getTree();
    },
    //数组差集
    subSet(arr1, arr2) {
        var set2 = new Set(arr2);
        var subset = [];
        arr1.forEach(function(val, index) {
            if (!set2.has(val)) {
                subset.push(val);
            }
        });
        return subset;
    },
    nodeExpand(a,b,c){
        //console.log(a);
        //console.log(a.itemList[0].id);
        let that = this;
        let ids = a.itemList.map(item => item.id);
        that.zhanData = that.zhanData.concat(ids);
        //console.log(that.zhanData);
    },
    nodeCollapse(a,b,c){
        //console.log(a);
        let that = this;
        let ids = a.itemList.map(item => item.id);
        that.zhanData = that.subSet(that.zhanData,ids);
        //console.log(that.zhanData);
    },
    getTree() {
      let that = this;
      axios.get("/dataplatform/system/case/ztree").then(function(res) {
        if (res.status == 200) {
          if (res.data.code == 200) {
            //console.log(res.data.data);
            that.data = res.data.data;
          }
        }
        //console.log(res, 22);
      });
    },
    delNodes() {
      let that = this;
      let checkNodes = this.$refs.tree.getCheckedNodes();
      //console.log(checkNodes);
      checkNodes = checkNodes.map(item => item.id);
      checkNodes = checkNodes.filter(item => item !== null);
      //console.log(checkNodes);
      if(checkNodes.length == 0){
          alert("请选择要删除的节点");
          return;
      }
      //return;
      axios.post("/dataplatform/system/case/delete",checkNodes).then(function(res) {
        if (res.status == 200) {
          if (res.data.code == 200) {
              alert("删除成功");
              that.getTree();
          }
          else{
              alert(res.data.message);
          }
        }
      });
    },
  }
};
</script>

<style lang="scss">
body{
    overflow: inherit;
}
#del-treecase{
    padding:40px;
}
</style>
